<template>
    <div>
        <h1>人员列表 </h1>
        <input type="text" placeholder="请输入名字" v-model="username">
        <button @click="addUser">添加</button>
        <ul>
            <li v-for="p in personList" :key="p.id" >{{p.name}}</li>
        </ul>
        <h3>计算和：{{sum}}</h3>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {nanoid} from 'nanoid'
    export default {
        name:'person',
        data() {
            return {
                username:''
            }
        },
        computed: {
            ...mapState(['personList','sum'])
        },
        methods: {
            addUser(){
                const obj ={id:nanoid(),name:this.username}
                this.$store.commit('ADDPERSON',obj)
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>